<template>
  <div style="width: auto;height: 100%">
    <div v-show= "!isLogin" @click="Login" id="loginBtn">
      <span >登录/注册</span>
    </div>
    <div v-show= "isLogin" style=" display: inline-block; height: 100%; line-height:50px;padding-top: 5px">

        <div  slot="reference" class="notify" style="display: inline-block;width: 40px;height: 40px;margin-right: 20px;float: left">
          <el-badge is-dot style="" :hidden="!showDian">
          <i class="el-icon-message-solid"  style="color: #f1f1f1;font-size: 20px;cursor: pointer" @click="toNorify"></i>
          </el-badge>
        </div>
      <el-popover
      width="300"
      trigger="hover"
      >
      <div style="padding: 10px" class="userStyleDiv">
        <div style="height: 80px;margin-bottom: 10px">
          <div style="display:inline-block;width:80px;height: 100%">
            <el-avatar :size="80"  :src="user.imageUrl" ></el-avatar>
          </div>
          <div  class="showName">
            <strong style="display: inline-block;height: 50px;line-height: 50px;font-size: 30px">{{user.nickname}}</strong><br>
            <span>{{user.signature}}</span>
          </div>
        </div>
<!--        <div style="margin: 10px 0px;text-align: center">-->
<!--          <el-button @click="courseManage">我的课程</el-button>-->
<!--          <el-button @click="inUserCenter">个人中心</el-button>-->
<!--        </div>-->
        <el-divider></el-divider>
        <div @click="courseManage" id="quitBtn">
          我的课程
        </div>
        <el-divider></el-divider>
        <div @click="inUserCenter" id="quitBtn">
          个人中心
        </div>
        <el-divider></el-divider>
        <div @click="quitLogin" id="quitBtn">
          安全退出
        </div>
      </div>
      <el-avatar slot="reference"   :src="user.imageUrl" ></el-avatar>
    </el-popover>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'UserMenu',
  data () {
    return {
      showDian: false
    }
  },
  mounted () {
    this.getListAnnounce()
  },
  methods: {
    Login: function () {
      this.$router.replace('/login')
    },
    quitLogin: function () {
      this.$store.commit('quitLogin')
      this.$router.replace('/login')
    },
    courseManage () {
      this.$router.push('/backHome/courseManage')
    },
    inUserCenter () {
      this.$router.push('/userHome/userCenter')
    },
    toNorify () {
      this.$router.push('/notify')
    },
    getListAnnounce () {
      var _this = this
      this.$axios.post('/api/notify/getNoReadCount',
        this.$qs.stringify({
          userId: this.user.userId
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            if (data.result > 0) {
              _this.showDian = true
            } else {
              _this.showDian = false
            }
          }
        })
    }
  },
  computed: mapState({
    user: 'user',
    isLogin () {
      if (this.$store.state.user.userId) {
        return true
      } else {
        return false
      }
    }
  })
}
</script>

<style >
  .userStyleDiv .el-divider{
    margin: 12px 0px;
  }
  .showName{
    display:inline-block;
    margin-left: 10px;
    height: 100%;
    width:150px;
    overflow: hidden;
    word-break:keep-all;

    white-space:nowrap;

    text-overflow:ellipsis;
  }
  #loginBtn{
    display: inline-block;
    line-height: 50px;
    padding: 0px 10px;
    color: #FFFFFF;
    height: 50px;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
  }
  #loginBtn span{
    font-size: 14px;
  }
#loginBtn:hover{
  border-bottom: 2px solid #ffd04b;
  color: #FFFFFF;
}
  #quitBtn{
    display: inline-block;
    padding-right: 10px;
    cursor: pointer;
  }
  .notify .el-badge__content.is-fixed{
    top: 10px
  }
</style>
